<template>
  <div>

    <el-container>
    <el-aside width="300px">
    <el-row class="tac">
      <el-col :span="12" style="width: 200px">
        <h5>个人中心</h5>
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-vertical-demo"
          router>
          <el-menu-item index="/student">
            <i class="el-icon-setting"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="/courseindex">
            <i class="el-icon-menu"></i>
            <span slot="title">我的学习计划</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    </el-aside>

    <el-main>


      <el-row class="demo-avatar demo-basic">
        <el-col :span="12">
          <div class="sub-title"></div>
          <div class="demo-basic--circle">
            <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
          </div>
        </el-col>
      </el-row>

    <el-form ref="form" :model="form" label-width="80px" style="width: 500px">
      <el-form-item label="用户名">
        <el-input v-model="form.username" :disabled="true"></el-input>
      </el-form-item>
       <el-form-item label="密码">
        <el-input v-model="form.password"   show-password></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.truename"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.telephone"></el-input>
      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="edituser">修改</el-button>
      </el-form-item>

    </el-form>
    </el-main>

      </el-container>
  </div>
</template>

<script>
    export default {
        name: "student",



      data() {
        return {
          circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
          sizeList: ["large", "medium", "small"],
          breadcrumbItems: ['导航一'],
          form: {
            username: '',
            telephone:'',
            truename:'',
            sex: '',
            password: 0,
            truename: '',
          },
           showname:JSON.parse(window.sessionStorage.getItem('iflogin')), //判断登录
          loginname:window.sessionStorage.getItem('username'),
          }
         },
      created () {
    this.getUser()
  },
      methods: {
         async getUser () {
      let res = await this.$axios.get('checkstudent', {
        params:
        {username:window.sessionStorage.getItem('username')}
        })
      this.form.username=res.data.username
      this.form.password=res.data.password
      this.form.truename=res.data.truename
      this.form.sex=res.data.sex
      this.form.telephone=res.data.telephone
    },
    edituser () {
      this.$refs.form.validate(async valid => {
        //this.form.username=window.sessionStorage.getItem('username')
        if (!valid) return
        // 发起修改用户信息请求
        let res = await this.$axios.post('editUserMessage', this.form)
        if (res.data.code === 400) {
          return this.$message.error('修改用户失败！')
        }
        // 关闭对话框
        //this.editVisble = false
        // 刷新数据列表
        this.getUser()
        // 提示修改成功
        this.$message.success('修改用户成功！')
      })
    },

      }
    }
</script>

<style scoped>

</style>
